{% extends 'base/base.html' %}
{% load static %}

{% block Title %}
详情
{% endblock %}

{% block css %}
<link rel="stylesheet" href="{% static 'css/music-player-styles.css' %}">
<link rel="stylesheet" href="{% static 'css/list-styles.css' %}">
{% endblock %}



{% block main %}
<div class="detail-container">
    <div class="detail-card">
        <!-- 页面标题 -->
        <div class="detail-header">
            <h1>{{ title }}</h1>
            <p>演唱者：{{ author }}</p>
        </div>

        <!-- 3D封面展示区域 -->
        <div class="cover-section">
            <div class="ring-wrapper">
                <div class="mini-ring">
                    <img class="coverBox" src="{{ cover }}" alt="专辑封面">
                </div>
            </div>
        </div>

        <!-- 播放器控制区域 -->
        <div class="detail-controls">
            <!-- 当前播放信息 -->
            <div class="current-song-info">
                <h3>{{ title }}</h3>
                <p>{{ author }}</p>
            </div>

            <!-- 进度条 -->
            <div class="detail-progress-section">
                <div class="detail-progress-label">
                    <span id="currentTime">0:00</span>
                    <span id="totalTime">0:00</span>
                </div>
                <input type="range" id="progressBar" min="0" max="100" value="0">
            </div>

            <!-- 控制按钮 -->
            <div class="control-buttons">
                <button class="detail-control-btn" id="ctrlBtn" title="播放/暂停">
                    <img src="/static/tu/bf.png" alt="播放">
                </button>
            </div>

            <!-- 返回按钮 -->
            <div style="text-align: center; margin-top: 30px;">
                <a href="{% url 'main:LoveListView' %}" class="back-button">🔙 返回我的喜欢</a>
            </div>
        </div>
    </div>
</div>

<!-- 音频播放器 -->
<audio id="player" preload="auto">
    <source src="" type="audio/mpeg">
    您的浏览器不支持 audio 标签。
</audio>
{% endblock %}

{% block js %}
<script>
    const audio = document.getElementById('player');
    const audio1 = "{{ audio1 }}";      // 后台传过来的音频地址
    const btn  = document.getElementById('ctrlBtn');
    const $ring = $('.mini-ring');

    console.log(audio1);

    audio.src = audio1;   // 换歌
    audio.load();         // 重新加载
    audio.play();         // 自动播放

    $('#ctrlBtn img').attr('src', '/static/tu/zt.png');  // 换成暂停图标

    // 设置3D封面效果
    const cover = "{{ cover }}";
    if (cover) {
        const covers = Array(4).fill(cover);
        $ring.empty();
        let html = '';
        covers.forEach(() => html += `<img class="coverBox" src="${cover}">`);
        $ring.append(html).addClass('spin');
        const R = 180;
        $ring.find('img').each((i, img) => {
            img.style.transform =
                `translate(-50%,-50%) rotateY(${i * 90}deg) translateZ(${R}px)`;
        });
    }
</script>

<script>
$('#ctrlBtn').on('click', function () {
    const audio = document.getElementById('player');
    if (audio.paused) {
      audio.play();
      $('#ctrlBtn img').attr('src', '/static/tu/zt.png');
    } else {
      audio.pause();
      $('#ctrlBtn img').attr('src', '/static/tu/bf.png');
    }
});
</script>

<script>
const bar = document.getElementById('progressBar');
audio.addEventListener('loadedmetadata', () => {
    bar.max = audio.duration;
    $('#totalTime').text(formatTime(audio.duration));
});

audio.addEventListener('timeupdate', () => {
    bar.value = audio.currentTime;
    $('#currentTime').text(formatTime(audio.currentTime));
});

bar.addEventListener('input', () => audio.currentTime = bar.value);

function formatTime(seconds) {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
}
</script>
{% endblock %}